<template>
	<div id="classname" class="_page">
		<div class="clas_head">
			<header-back title="分类" ref="title"></header-back>
		</div>
		
		<div class="wrap-box">
			<div class="class_container1" ref="lefView">
				<ul class="namelist">
					<li class="l-item" :key="index" :class="{'active' : index == active}" v-for="(item , index) in classNamelist" @click="scrollIndex(index)">{{ item.name }}</li>
				</ul>
			</div>
			<div class="class_container2" ref="rigView">
				<ul class="mainlist">
					<li v-for="(item , index) in classNamelist" :key="index" class="r-item">
						<p class="item-name">{{ item.name }}</p>
						<div class="list-wrap">
							<div v-for="(item , index) in item.children" :key="index" @click="linkToPage('12')">
								<img v-lazy="item.src" class="width_img">
								<p class="fs-14 text-center">{{ item.name }}</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<app-footer></app-footer>
	</div>
</template>

<script>
	import _ from 'lodash'
	import Footer from '../footer/Footer'
	import HeaderBack from '../../components/header-back/header-back'
	export default{
		name:"classname",
		data(){
			return{
				active : 0,
				classNamelist : [],
				offsetT : [],
				timer: null,//定时器
			}
		},
		components:{
			"app-footer" : Footer,
			"header-back" : HeaderBack
		},
		methods:{
			// 左侧点击 右侧菜单滚动
			scrollIndex(index){
				var scrollTop = this.offsetT[index];
				this.$refs.rigView.scrollTop = scrollTop

				// 设置当前项
				setTimeout( () => {
					this.active = index
				} , 10)
			}
			
		},
		mounted(){
			this.$http.get("../../../mishop/static/itemJson/pgClassName.json").then(res => {
				//console.log(res.body)
				this.classNamelist = res.body

				// 左侧点击时 设置右侧滚动单位  必须放在.then里面才能起效
				//console.log(_)
				setTimeout(() => {
					_.forEach(this.$refs.rigView.querySelectorAll('.r-item'),(value,index) => {
						//console.log(value.offsetHeight * index)
						//console.log(value)
						//console.log(index)
						this.offsetT.push(value.offsetHeight * index)
					})
				})
			})

			

			// 右侧滚动检测   为元素添加滚动事件
			this.$refs.rigView.addEventListener("scroll" , e => {
				if(this.timer){
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(() => {//函数节流，让拖动时不会一直不停地拖而是16毫秒拖动一次，提高性能
					var rigscT2 = this.$refs.rigView.scrollTop
					for(var i = 0 ; i < this.offsetT.length ; i++){
						if(rigscT2 > this.offsetT[i]){
							this.active = i
						}
					}
				},16)
				
			},true)
		}
	}
</script>

<style scoped>
	#classname{
		position: relative;
	}
	.wrap-box{
		position: absolute;
		top: 50px;
		width : 100%;
		left: 0;
		bottom: 55px;
		-webkit-overflow-scrolling : touch;
	}
	.class_container1,.class_container2{
		position: absolute;
		top: 0;
		bottom: 0;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.class_container1{
		width :23%;
		left: 0;
			
		box-sizing: border-box;
	}
	.class_container2{
		width:77%;
		right: 0;
	}
	.namelist{
		border-right: 1px solid #eee;
		overflow: hidden;
	}
	.namelist li{
		text-align: center;
		padding: 15px 5px;
		font-size: 15px;
		height: 20px;
		overflow: hidden;
	}
	.item-name{
		position: relative;
		text-align: center;
		padding-top: 25px;
		font-size: 14px;
		color: #000;
	}
	.list-wrap{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
	}
	.list-wrap div{
		width:33%;
		padding: 15px;
		box-sizing: border-box;
	}
	.active{
		color: #FF6B00;
		font-size: 17px !important;
	}
	.item-name:after{
		content:"";
		position: absolute;
		bottom: 9px;
		left: 96px;
		width:20px;
		height: 1px;
		background-color: #ddd;
	}
	.item-name:before{
		content:"";
		position: absolute;
		bottom: 9px;
		right: 96px;
		width:20px;
		height: 1px;
		background-color: #ddd;
	}

</style>